<title>分类列表</title>
<div class="layui-card layadmin-header">
<div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>应用</cite></a>
    <a><cite>分类列表</cite></a>
</div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="classify" lay-filter="classify"></table>
            <script type="text/html" id="table-classify-list">
            {{# if(d.parent_id == '0'){ }}
            <a class="layui-btn layui-btn-xs" lay-event="add_tree">添加</a>
            <a class="layui-btn layui-btn-xs" lay-event="change_tree">修改</a>
            <a class="layui-btn layui-btn-xs" lay-event="del_tree">删除</a>
            {{# }else{ }}
            <a class="layui-btn layui-btn-xs" lay-event="change_tree">修改</a>
            <a class="layui-btn layui-btn-xs" lay-event="del_tree">删除</a>
            {{# } }}
            </script>
        </div>
        <div id="articleDelPage" style="text-align: center"></div>

        <div id="addSon" style="display: none">
            <div class="layui-form" style="padding-top: 20px;">
                <div id="parent_classify_name_box" class="layui-form-item">
                    <label class="layui-form-label">父类名:</label>
                    <div class="layui-input-inline">
                        <input id="parent_classify_name" name="name" class="layui-input layui-elip" readonly title="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分类类名:</label>
                    <div class="layui-input-inline">
                        <input id="to_add_classify_name" name="name" class="layui-input layui-elip" title="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-btn" lay-submit lay-filter="addSon">
                            添加
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="changeClassify" style="display: none">
            <div class="layui-form"  lay-filter="changeform" style="padding-top: 20px;">
                <div id="parent_classify_name_box" class="layui-form-item">
                    <label class="layui-form-label">修改类名为:</label>
                    <div class="layui-input-inline">
                        <input id="change_classify_name" name="name" class="layui-input layui-elip" title="">
                    </div>
                </div>
                <div id="parent_list" class="layui-form-item layui-hide">
                    <div class="layui-input-inline" style="margin-left: 110px;">
                        <select id="parent_classify" name="parent_id" lay-filter="new_parent_id">
                        
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div id="change_classify_do" class="layui-btn" lay-submit lay-filter="changeClassify">
                            确认修改
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
layui.use(['admin', 'table','server','treetable'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,table = layui.table
    ,form = layui.form
    ,server = layui.server
    ,laytree = layui.treetable
    var options = {};
    options.url = 'getAllClassify';
    options.callback = function(data){
        var result = data.data || [];
        renderTable(result);
    }
    server.req(options);

    var renderTable = function (data) {
            laytree.render({
                treeColIndex: 1,
                treeSpid: '0',
                treeIdName: 'id',
                treePidName: 'parent_id',
                elem: '#classify',
                data:data,
                page: false,
                cols: [[
                    {field:'id',type: 'checkbox',hide:true},
                    {field: 'name', title: '类型名称'},
                    {templet: '#table-classify-list',  align: 'left', title: '操作'}
                ]]
            });
            table.on('tool(classify)',function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;
                if(layEvent == 'add_tree'){
                    layer.open({
                        type:1,
                        content:$('#addSon'),
                        area:['400px','300px'],
                        shade:0,
                        success:function(){
                            $('#parent_classify_name').val(data.name);
                            form.render();
                            form.on('submit(addSon)',function(form_data){
                                var add_data = form_data.field;
                                add_data.parent_id = data.id;
                                var options = {};
                                options.url = 'addSon';
                                options.data = add_data;
                                options.callback = function(){
                                    layer.msg('添加成功',{time:1000},function(){
                                        setTimeout(() => {
                                            location.reload();
                                        }, 1000);
                                    });
                                }
                                server.req(options);
                            });
                        }
                    });
                }else if(layEvent == 'change_tree'){
                    var options = {};
                    options.url = 'getAllParent';
                    options.callback = function(parents){
                        var len = parents.data.length;
                        var html = '<option value=""></option>'
                        for(var i=0;i<len;i++){
                            html += '<option value='+parents.data[i].id+'>'+parents.data[i].name+'</option>';
                        }
                        $('#parent_classify').html(html);
                        form.render();
                        form.val('changeform',data);
                        layer.open({
                            type:1,
                            content:$('#changeClassify'),
                            area:['400px','500px'],
                            shade:0,
                            success:function(){
                                if(data.parent_id != 0){
                                    $('#parent_list').removeClass('layui-hide');
                                }
                            }
                        });
                    };
                    server.req(options);

                    form.on('submit(changeClassify)',function(form_data){
                        console.log(form_data);
                        var change_data = form_data.field;
                        change_data.id = data.id
                        var options = {};
                        options.url = 'changeClassify';
                        options.data = change_data;
                        options.callback = function(){
                            layer.msg('修改成功',{time:1000},function(){
                                setTimeout(() => {
                                    location.reload();
                                }, 500);
                            });
                        }
                        server.req(options);
                    });
                }else if(layEvent == 'del_tree'){
                    layer.confirm('确定要删除?',{
                        btn: ['删除','算了']
                    },function(){
                        var options = {};
                        options.url = 'delClassify';
                        options.data = {id:data.id};
                        options.callback = function(){
                            layer.closeAll();
                            obj.del();
                        }
                        server.req(options);
                    });
                }
            });
        };
});
</script>
